﻿<!DOCTYPE html>
<!--法律法规导入-->
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="/static/js/common.js"></script>
    <link href="/static/js/vue-treeselect/vue-treeselect.css" rel="stylesheet" />
    <script src="/static/js/vue-treeselect/vue-treeselect.js"></script>

    <style>
        .redItem .el-form-item__label {
            width: 210px;
        }

        html {
            overflow-x: hidden;
            overflow-y: hidden;
        }

        .redItem {
            margin-left: 5%;
        }

        .el-form-item--mini .el-form-item__content, .el-form-item--mini .el-form-item__label {
            line-height: 19px;
        }
    </style>
</head>
<body>
    <div id="LawImport" v-cloak>
        <el-form :model="Form" status-icon ref="ruleForm" label-width="100px" size="mini" label-position="right" class="demo-form-inline">
            <!--头部文本框-->
            <!--文件清单行-->
            <el-row :gutter="24">
                <!--文件清单-->
                <el-col :xs="20" :sm="6" :md="6" :lg="12" :xl="4">
                    <el-form-item :label="LawRegulationsInput.FileList+mark.m" prop="FileList" class="redItem">
                        <!--文件名称label-->
                        <label ref="fileForm" v-model="labelUpload">{{labelUpload}}</label>
                    </el-form-item>
                </el-col>
                <!--文件清单上传按钮|替换-->
                <!--:show-file-list="false"-->
                <el-col :xs="4" :sm="6" :md="6" :lg="12" :xl="4">
                    <el-upload class="upload-demo"
                               ref="Fileupload"
                               action="/api/FL_BasisInformation/Import"
                               multiple="true"
                               :on-preview="handlePreview"
                               :on-remove="handleRemove"
                               :before-upload="beforeupload"
                               :auto-upload="true"
                               :limit="1"
                               :show-file-list="false">
                        <el-button type="primary" @click="submitFileListUpload" style="width:30px;">...</el-button>
                    </el-upload>
                </el-col>
            </el-row>
            <!--附件行-->
            <el-row  :gutter="24">
                <!--附件-->
                <el-col :xs="20" :sm="6" :md="6" :lg="12" :xl="4">
                    <span>
                        <el-form-item :label="LawRegulationsInput.Attachment+mark.m" prop="attachfileid" class="redItem">
                            <!--附件名称label-->
                            <label>{{fileAttachmentUploadFile}}</label>
                        </el-form-item>
                    </span>
                </el-col>
                    <el-col :xs="4" :sm="6" :md="6" :lg="12" :xl="4">
                        <span>
                            <btn-uploadfile-input text="上传附件"
                                                  fileid="Form.attachfileid" showdownload="true"
                                                  @success="attachmentHandle"></btn-uploadfile-input>
                        </span>
                    </el-col>
                    <!--附件上传按钮-->
                    <!--<el-col :xs="4" :sm="6" :md="6" :lg="12" :xl="4">
        <el-upload class="upload-demo"
                   ref="Attachmentupload"
                   action="/api/File/UploadFile"
                   multiple="true"
                   :on-preview="handlePreview"
                   :on-remove="handleRemove"
                   :before-upload="fileAttachmentUploadbeforeupload"
                   :auto-upload="true"
                   :limit="1"
                   :show-file-list="false">
            <el-button type="primary" @click="btnAttachmentUpload" style="width:30px;">...</el-button>
        </el-upload>
    </el-col>-->
            </el-row>
            <!--提交行-->
            <el-row :gutter="20" style="margin-top:3%">
                <!--提交按钮-->
                <el-col :xs="12" :sm="6" :md="6" :lg="12" :xl="4">
                    <el-button type="primary" @click="onSubmit('ruleForm')" style="width:100px;margin-left:150%;margin-top:3%;">{{col.btnCommit}}</el-button>
                </el-col>
            </el-row>
        </el-form>
      
    </div>
    <script>
        var uploadText = "请选择上传Excel文件";
        var uploadTextFile = "请选择上传的附件";
        var app = new Vue({
            el: '#LawImport',
            data: {
                //附件
                fujian: '下载',
                labelUpload: uploadText,
                fileAttachmentUpload: uploadTextFile,
                fileAttachmentUploadFile: uploadTextFile,
                formInline: {
                    offset: 0,
                    limit: 10,
                },
                Form: {
                    attachfileid: '',
                    attachfilename: '',
                },
            },
          
            methods: {
                //解決edge下select bug
                visibleChange: function (isVisible) {
                    visibleChange(isVisible)
                },
                //附件名称
                attachmentHandle: function (response, fileid, fileName) {
                    this.Form.attachfileid = fileid;
                    this.Form.attachfilename = fileName;
                },
                submitFileListUpload: function () {
                    //若更换文件则将文件名字更换触发条件--先删除上一个文件,后添加一个文件
                    if (this.labelUpload != uploadText) {
                        this.$refs.Fileupload.clearFiles();
                        this.labelUpload = file.name;
                    }
                    else {

                    }
                    //this.$refs.upload.submit();
                },
                handleRemove: function (file) {
                    console.log(file);
                },
                handlePreview: function (file) {
                    console.log(file.name);
                    window.open(file.url)
                },
                //上传前文件的校验
                beforeupload: function (file) {
                    var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
                    //将文件名称赋值到label上
                    this.labelUpload = file.name;
                    const extension = testmsg === 'xls'
                    const extension2 = testmsg === 'xlsx'
                    const isLt2M = file.size / 1024 / 1024 < 10

                    if (!extension && !extension2) {
                        this.$message({
                            message: '上传文件只能是 xls、xlsx格式!',
                            type: 'warning'
                        });
                    }
                    if (!isLt2M) {
                        this.$message({
                            message: '上传文件大小不能超过 10MB!',
                            type: 'warning'
                        });
                    }
                    if (extension || extension2 && isLt2M)
                        submitUpload(this, 'upload')
                return extension || extension2 && isLt2M
                },
                //上传附件文件的校验
                fileAttachmentUploadbeforeupload: function (file) {
                    var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
                    //将附件名赋值到label上
                    this.fileAttachmentUpload = file.name;
                    const extension = testmsg === 'rar'
                    const extension2 = testmsg === 'zip'
                    const isLt2M = file.size / 1024 / 1024 < 10
                    if (!extension && !extension2) {
                        this.$message({
                            message: '上传文件只能是 rar、zip格式!',
                            type: 'warning'
                        });
                    }
                    if (!isLt2M) {
                        this.$message({
                            message: '上传文件大小不能超过 10MB!',
                            type: 'warning'
                        });
                    }
                    if (extension || extension2 && isLt2M)
                        submitUpload(this, 'upload')
                    return extension || extension2 && isLt2M
                },
                //提交按钮
                AAonSubmit: function () {
                    //上传成功条件--post请求,将文件post出去
                    if (this.labelUpload != col.lawUploadLabel && this.fileAttachmentUpload != col.lawUploadLabel) {
                        myAjax("post", this, '/api/FL_BasisInformation/Import', null,
                            function (response) {
                                showMessage(response.message, 'success')
                            });
                        this.labelUpload = uploadText;
                        this.fileAttachmentUpload = uploadText;
                        alert(msg.uploadSuccess);
                    }
                    //文件清单上传失败触发条件
                    else if (this.labelUpload == col.lawUploadLabel) {
                        alert(msg.uploadFileListFail);
                    }
                    //附件上传失败触发条件
                    else if (this.fileAttachmentUpload == col.lawUploadLabel) {
                        alert(msg.uploadAttachmentFail);
                    }
                    else {
                        alert("上传失败");
                    }
                },

                //提交按钮
                onSubmit: function (formName) {
                    var mythis = this;
                    this.$refs[formName].validate(function (valid) {
                        //验证通过
                        if (valid) {
                            //上传成功条件--post请求,将文件post出去
                            if (this.labelUpload != col.lawUploadLabel && this.fileAttachmentUpload != col.lawUploadLabel) {
                                this.labelUpload = uploadText;
                                this.fileAttachmentUpload = uploadText;
                            }
                            //文件清单上传失败触发条件
                            else if (this.labelUpload == col.lawUploadLabel) {
                                alert(msg.uploadFileListFail);
                            }
                            //附件上传失败触发条件
                            else if (this.fileAttachmentUpload == col.lawUploadLabel) {
                                alert(msg.uploadAttachmentFail);
                            }
                            else {
                                alert("上传失败");
                            }

                            onSubmitForm(this, '/api/FL_BasisInformation/SaveFileName', mythis.Form);
                          //  onSubmitForm(this, '', mythis.Form);
                        }
                        else {
                            showMessage(msg.NoMust, 'error');
                            return false;
                        }
                    });
                },



                //导出--暂时此提示--之后跟官标实现
                FileExcel: function () {
                    myAjax("post", this, '/api/LawRegulationsImport/export', null,
                        function (response) {
                            console.log(response);
                            if (response.result == "Success") {
                                showMessage(response.message, 'success');
                            }
                            else {
                                showMessage(response.message, 'fail');
                            }

                        });
                },
                //上传文件校验
                btnAttachmentUpload: function () {
                    //若更换文件则将文件名字更换触发条件--先删除上一个文件,后添加一个文件
                    if (this.fileAttachmentUpload != uploadText) {
                        this.$refs.Attachmentupload.clearFiles();
                        this.fileAttachmentUpload = file.name;
                    }
                    else {

                    }
                    this.$refs.Attachmentupload.submit();
                }   
            },

        });
    </script>
</body>
</html>